<template>
	<div>
		<div>
			<el-form :inline="true" ref="searchForm" :model="searchForm" class="forTbFilter flowStatistics"
				label-position="left" @submit.native.prevent>

				<el-form-item label="MUID号：" v-if="curr_role==2">
					<el-input v-model.trim="searchForm.muid" clearable></el-input>
				</el-form-item>

				<el-form-item label="所属客户：" v-if="curr_role==2">
					<el-select v-model="searchForm.agentId" filterable placeholder="请选择或输入关键字" clearable
						@change="changeAgentId()">
						<el-option v-for="item in agentsOption" :value="item.id" :key="item.id"
							:label="item.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="所属链接：">

					<!-- 根据选择的客户，选取所属链接 -->
					<el-select v-model="searchForm.urlId" filterable placeholder="请选择或输入关键字" clearable>
						<el-option v-for="item in urlsOption" :value="item.id" :key="item.id"
							:label="item.urlNote"></el-option>
					</el-select>



				</el-form-item>

				<el-form-item label="创建时间：" class="dateRange">
					<el-date-picker v-model="searchForm.time" range-separator="至" type="daterange"
						start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>


				<el-form-item class="btnArea">
					<el-button type="primary" @click="getFlowStatisticsHandler" icon="el-icon-search">查 询</el-button>
					<el-button type="primary" @click="excelSelect()" icon="el-icon-download">导出数据</el-button>
				</el-form-item>
			</el-form>
		</div>



		<el-table :data="tbpg.tableData" border height="600">
			<el-table-column type="index" label="序号"></el-table-column>
			<el-table-column prop="urlName" label="链接名称" v-if="field_show.urlName_status=='1'"></el-table-column>
			<el-table-column prop="agentName" label="客户名称"></el-table-column>
			<el-table-column prop="muid" label="muid" v-if="field_show.muid_status=='1'"></el-table-column>



			<!-- 新增，显示 phone字段 -->
			<!-- <el-table-column prop="phone" label="phone" v-if="field_show.userPhone_status=='1'"></el-table-column> -->
			<!-- 新增，显示 phone字段 -->


			<el-table-column prop="android_id" label="android_id"
				v-if="field_show.androidId_status=='1'"></el-table-column>
			<el-table-column prop="oaid" label="oaid" v-if="field_show.oaid_status=='1'"></el-table-column>
			<el-table-column prop="site_set" label="site_set" v-if="field_show.siteSet_status=='1'"></el-table-column>
			<el-table-column prop="campaign_id" label="campaign_id"
				v-if="field_show.createTime_status=='1'"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" v-if="field_show.createTime_status=='1'"></el-table-column>
			<el-table-column prop="click_time" label="click_time"
				v-if="field_show.clickTime_status=='1'"></el-table-column>
			<el-table-column prop="advertiser_id" label="advertiser_id"
				v-if="field_show.advertiserId_status=='1'"></el-table-column>
			<el-table-column prop="user_agent" label="user_agent"
				v-if="field_show.userAgent_status=='1'"></el-table-column>
			<el-table-column prop="agent_id" label="agent_id" v-if="field_show.agentId_status=='1'"></el-table-column>
			<el-table-column prop="click_sku_id" label="click_sku_id"
				v-if="field_show.clickSkuId_status=='1'"></el-table-column>


		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="tbpg.currentPage" :page-sizes="[15, 50, 100, 500]" :page-size="tbpg.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="tbpg.total">
		</el-pagination>

	</div>
</template>
<script>
	// import {
	// 	// flowStatistics,
	// 	// flowEveryDayDetail,
	// 	// flowEveryMonthDetail,
	// 	// flowStatisticsExport
	// } from '@/api/csm.js'

	// 原始的获取抖音消息的链接
	// import {getDouyingInfo} from '@/api/fluxPools.js'

	import {
		getTencentPermissionInfo
	} from '@/api/fluxPools.js'

	import {
		getFieldList
	} from '@/api/fieldManage.js'

	import common from '@/utils/common.js'
	// var echarts = require('echarts'); // 引入 ECharts 主模块
	export default {
		data() {
			return {

				// 不同角色 允许显示的字段
				field_show: {
					"muid_status": "1",
					"userPhone_status": "1",
					"clickTime_status": "1",
					"advertiserId_status": "1",
					"androidId_status": "1",
					"userAgent_status": "1",
					"campaignId_status": "1",
					"agentId_status": "1",
					"clickSkuId_status": "1",
					"siteSet_status": "1",
					"oaid_status": "1",
					"createTime_status": "1",
					"urlName_status": "1"
				},

				batchOptVisible1: false,

				agentsOption: [],
				urlsOption: [],
				searchForm: {
					agentId: '',
					urlId: '',
					muid: ''
				},
				//每月流量详情表
				tbpg: {
					tableData: [],
					currentPage: 1,
					pageSize: 15,
					total: 0
				},

				curr_role: "",

			}
		},
		methods: {

			// 当改变了客户列表选择时
			changeAgentId() {
				this.handleTiktosPermissionUrlList();
			},


			handleSuccess(res) {
				if (res.code == 200) {
					this.$message.success(res.message);
				} else {
					this.$message.error(res.message);
				}
				this.cancel();
				this.$refs.upload.clearFiles();
			},


			excelSelect($event) {
				common.resetCurrentPage(this, $event, 'tbpg');
				var data = common.getRequestParams(this, 'tbpg', this.searchForm);
				data.token = localStorage.getItem('token');
				common.sysRequest('excels/all/tencentUrlInfos', data, 'post').then(res => {
					if (res.data.code == 200) {
						this.$message.success('下载中，请稍后在下载管理中查询');
					} else {
						this.$message.error(res.data.message);
					}
				})
			},


			// 触发查询按钮
			getFlowStatisticsHandler($event) {
				common.resetCurrentPage(this, $event, 'tbpg');
				var data = common.getRequestParams(this, 'tbpg', this.searchForm);

				// wzyk新增
				getTencentPermissionInfo(data).then(res => {
					common.listCallback(this, res, 'tbpg')
				})
				// wzyk新增
			},

			// exportInfoHandle() { //导出excel文件
			// 	this.$confirm("确定要导出吗？", "提示", {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消'
			// 	}).then(() => {
			// 		let param = this.searchForm;
			// 		flowStatisticsExport(param).then(res => {
			// 			if (res.data.code == 200) {
			// 				this.$message.success('数据导出中,请稍候去任务中心下载');
			// 			} else {
			// 				this.$message.error(res.data.msg);
			// 			}
			// 		}).catch(err => console.error(err));
			// 	}).catch(() => {});
			// },


			handleSizeChange(val) {
				this.tbpg.pageSize = val;
				this.getFlowStatisticsHandler();
			},
			handleCurrentChange(val) {
				this.tbpg.currentPage = val
				this.getFlowStatisticsHandler();
			},

			// 获取客户自己的链接
			handleTiktosPermissionUrlList() {
				// //wzyk 新增
				common.sysRequest('tencent/permissionList/all', this.searchForm, 'post').then(res => {
					if (res.data.code == 200) {
						this.urlsOption = res.data.data;
					}
				})
			},

			// 给不同用户装配可显示字段
			handleFieldShow() {
				let that = this;
				getFieldList().then(res => {
					if (res.data.message === "2") {
						that.field_show.muid_status = "1";
						that.field_show.userPhone_status = "1";
						that.field_show.clickTime_status = "1";
						that.field_show.advertiserId_status = "1";
						that.field_show.androidId_status = "1";
						that.field_show.userAgent_status = "1";
						that.field_show.campaignId_status = "1";
						that.field_show.agentId_status = "1";
						that.field_show.clickSkuId_status = "1";
						that.field_show.siteSet_status = "1";
						that.field_show.oaid_status = "1";
						that.field_show.createTime_status = "1";
						that.field_show.urlName_status = "1";
					} else {
						var list = res.data.data;
						for (var i = 0; i < list.length; i++) {
							if (list[i]["source"] != "视频号") {
								continue;
							}
							if (list[i]["name"] === "muid" && list[i]["status"] === "0") that.field_show
								.muid_status = "0";
							if (list[i]["name"] === "clickTime" && list[i]["status"] === "0") that.field_show
								.clickTime_status = "0";
							if (list[i]["name"] === "advertiserId" && list[i]["status"] === "0") that.field_show
								.advertiserId_status = "0";
							if (list[i]["name"] === "androidId" && list[i]["status"] === "0") that.field_show
								.androidId_status = "0";
							if (list[i]["name"] === "userAgent" && list[i]["status"] === "0") that.field_show
								.userAgent_status = "0";
							if (list[i]["name"] === "campaignId" && list[i]["status"] === "0") that.field_show
								.campaignId_status = "0";
							if (list[i]["name"] === "agentId" && list[i]["status"] === "0") that.field_show
								.agentId_status = "0";
							if (list[i]["name"] === "clickSkuId" && list[i]["status"] === "0") that.field_show
								.clickSkuId_status = "0";
							if (list[i]["name"] === "siteSet" && list[i]["status"] === "0") that.field_show
								.siteSet_status = "0";
							if (list[i]["name"] === "oaid" && list[i]["status"] === "0") that.field_show
								.oaid_status = "0";
							if (list[i]["name"] === "createTime" && list[i]["status"] === "0") that.field_show
								.createTime_status = "0";
							if (list[i]["name"] === "userPhone" && list[i]["status"] === "0") that.field_show
								.userPhone_status = "0";
							if (list[i]["name"] === "urlName" && list[i]["status"] === "0") that.field_show
								.urlName_status = "0";
						}
					}
				})
			}

		},
		created() {},

		mounted() {
			this.getFlowStatisticsHandler();
			// 装填 agentid 列表
			common.getNextAgentOptsCom(this, 'agentsOption');
			// 原始获取专属链接操作

			this.handleTiktosPermissionUrlList();
			this.handleFieldShow();
			this.curr_role = localStorage.getItem('id');
		},

		updated: function() {

		},

		watch: {

		}
	}
</script>

<style>
	.flowStatistics .el-input-group__prepend,
	.flowStatistics .el-input-group__append {
		background-color: #f5f5f5;
	}

	.flowStatistics .el-form-item__content {
		width: 250px;
	}
</style>

<style lang="less" scoped>
	.forTbFilter {
		display: inline-block;

		.btnArea {
			display: inline-block;
			margin-left: 30px;

		}
	}

	.stopMessage {
		font-size: 18px;
		margin: 0 0 10px 0;

		span {
			color: #ea2929;
			margin-right: 60px;

		}
	}
</style>